<template>
  <div class="doubao-chat-container">
    <!-- 新增标题和头像 -->
    <div class="chat-header">
      <el-avatar :size="40" :src="'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
      <h2 class="chat-title">考研AI助手</h2>
    </div>
    
    <div class="chat-messages">
      <BubbleList :list="list" />
    </div>
    <el-progress
      v-if="isLoading"
      :percentage="100"
      status="success"
      :indeterminate="true"
      :duration="5"
      stroke-width="12"
      class="progress-bar"
    />
    <div class="chat-input-area">
      <Sender v-model="searchQuery" placeholder="💬 输入您的问题..." clearable :loading="isLoading" @submit="chat"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { BubbleListItemProps, BubbleListProps } from 'vue-element-plus-x/bubbleList/types'
import http from '@/utils/http'
import { ElMessage } from 'element-plus';

type listType = BubbleListItemProps & {
  key: number
  role: 'user' | 'ai'
}

const searchQuery = ref('')
const isLoading = ref(false)
const list = ref<BubbleListProps<listType>['list']>([])

const chat = async () => {
  if (!searchQuery.value.trim()) return;
  isLoading.value = true;
  var query = searchQuery.value;
  searchQuery.value = '';
  try {
    // 先添加用户消息
    list.value.push({
      key: Date.now(),
      role: 'user',
      placement: 'end',
      content: query,
      loading: false,
      shape: 'corner',
      variant: 'outlined',
      isMarkdown: false,
      typing: false,
      isFog: false,
      avatar: 'https://assets.leetcode.cn/aliyun-lc-upload/users/yuan-ri-dian/avatar_1672975239.png',
      avatarSize: '24px',
      avatarGap: '12px'
    });
    const response = await http.post('/information/chat/', {
      query: query
    }, {
      timeout: 120000 // 设置120秒超时
    });

    if (response?.data?.content) {
      isLoading.value = false;
      list.value.push({
        key: Date.now() + 1,
        role: 'ai',
        placement: 'start',
        content: response.data.content,
        loading: false,
        shape: 'corner',
        variant: 'filled',
        isMarkdown: true,
        typing: true,
        isFog: true,
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        avatarSize: '24px',
        avatarGap: '12px'
      });
    } else {
      ElMessage.error('获取AI回复失败');
    }
  } catch (error) {
    ElMessage.error('请求失败，请稍后再试');
    console.error('API请求错误:', error);
  } finally {
    isLoading.value = false;
  }
};
</script>
<style scoped>
.doubao-chat-container {
  display: flex;
  flex-direction: column;
  height: 700px;
  background-color: #f7f8fa;
  position: relative;
  top: 10px;
  width: 800px;
}

.chat-messages {
  padding: 16px;
  overflow-y: hidden;
  border: 1px solid #e0e0e0;
  text-align: left;
  margin: 0;
  height: 600px;
  background: white;
}

.chat-input-area {
  position: relative;
  width: 100%;
  background: #f0d9d9;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* 新增头部样式 */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-title {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  color: #333;
}

.progress-bar {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
</style>
